import React, { useEffect,useState } from 'react'
import './One.less'
import { getList } from '../../utils/api'
function HeaderTow() {
    const [list,setList] = useState([])
    useEffect(()=>{
        getList().then(res=>{
            console.log(res.data.headerTwo,'res');
            setList(res.data.headerTwo)
        })
    },[])

    return (
        <div className='table2'>
            {
                list && list.map((item,index)=>{
                    return <div key={index}>
                        <img src={item.img} alt=""/>
                        <h2>{item.title}</h2>
                        <ul id='table2_ul'>
                            {
                                item.children && item.children.map((item,index)=>{
                                    return <li key={index}>
                                        {item}
                                    </li>
                                })
                            }
                        </ul>
                    </div>
                })
            }
            <div className='table2_bottom'>
                <span> 查找不同方案对比 &gt;</span>
            </div>
        </div>
    )
}

export default HeaderTow
